<template>
  <div class="export_set_wrapper">
    <div id="step" class="typeli">
      <span>导出数据</span>
      <a v-on:click="step_click($event,'');" :class="{select: step === ''}" id="allStep">全部</a>
      <a v-on:click="step_click($event,'0');" class="step" :class="{select: step === '0'}">已标注数据</a>
      <a v-on:click="step_click($event,'1');" class="step" :class="{select: step === '1'}">已检查数据</a>
      <a v-on:click="step_click($event,'2');" class="step" :class="{select: step === '2'}">已质检数据</a>
    </div>
    <div id="stamp" class="typeli">
      <span>导出类型</span>
      <a v-on:click="stamp_click($event,'');" :class="{select: stamp === ''}">全部</a>
      <a v-on:click="stamp_click($event,'0');" :class="{select: stamp === '0'}">好数据</a>
      <a v-on:click="stamp_click($event,'1');" :class="{select: stamp === '1'}">坏数据</a>
    </div>
    <div id="time" class="typeli">
      <span>导出时间</span>
      <a v-on:click="time_click($event,'0');" :class="{select: dateValue[0] === ''}">全部</a>
      <Date-picker @on-change="dateChange" @click.native="dateCheck" :disabled="step === ''" :value.sync="dateValue" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 320px; font-size:14px;"></Date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExportSet',
  data() {
    return {
      step: "",
      stamp: "",
      dateValue: ['', ''],
    }
  },
  methods: {
    dateCheck(){
      if(this.step === ''){ // 全部类型
        this.ui.fade('选择全部类型时,不得选择时间段！')
      }
    },
    step_click(event, type) {
      this.step = type;
      if (this.step === '') { // 选择全部
        this.stamp = ''; // 数据类型改为全部
        this.time_click('', '0')
      }
    },
    stamp_click(event, type) {
      this.stamp = type;
    },
    time_click(event, type) {
      // event = event.currentTarget;
      // this.info.startTime = "";
      // this.info.endTime = "";
      var isChoose = true;
      let getNow = this.Utils.getNow;
      // $(event).parent().find("a").removeClass("select");
      // $(event).addClass("select");
      if (type === "0" && isChoose) {
        var nowTime = getNow();
        this.dateValue = ['', nowTime]
        this.$emit('dateChange', ['', nowTime])
      }
    },
    dateChange(val) {
      let dateVal = val
      this.dateValue = dateVal
      this.$emit('dateChange', dateVal)
    },
    //校验的规则
    myvalidate() {
      var i = 0;
      // var stepNum = $("#step").find(".select").length;
      // var stampNum = $("#stamp").find(".select").length;

      // if(stepNum !== 1){
      //     ui.message("请选择导出数据");
      //     i+=1;
      //     return i;
      // }else if(stampNum !== 1){
      //     ui.message("请选择导出类型");
      //     i+=1;
      //     return i;
      // }
      return i;
    }
  }
}
</script>

<style lang="less" scoped>
.export_set_wrapper {
  .typeli {
    line-height: 36px;
    height: 36px;
    font-size: 0;
    color: #666;
    margin-bottom: 14px;
    &:last-of-type {
      border: 0;
    }
    span {
      font-size: 14px;
      float: left;
      line-height: 36px;
      margin-right: 11px;
    }
    a {
      width: 100px;
      display: inline-block;
      font-size: 14px;
      margin-right: 11px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      -o-border-radius: 2px;
      border-radius: 2px;
      height: 36px;
      line-height: 34px;
      color: #666;
      text-align: center;
      border: 1px solid #e0e0e0;
      float: left;
      cursor: pointer;
    }
    a.select {
      color: #14cb6b;
      border: 1px solid #14cb6b;
      background: #dbfceb;
      position: relative;
    }
    a.select:after {
      position: absolute;
      width: 22px;
      height: 22px;
      display: block;
      content: "";
      background: url("~@/assets/images/common/work-team/task_select_ico.png")
        no-repeat 0 0;
      right: 0px;
      bottom: 0px;
    }
  }
}
</style>
<style>
.typeli .ivu-input{
  height: 36px;
}
</style>
